<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: laikt
 * @Date: 2020-12-30 10:43:50
 * @LastEditors: laikt
 * @LastEditTime: 2020-12-30 14:29:41
-->
<style lang="scss" scoped>
.table-columns-fixed-controller {
    .el-button {
        padding: 2px;
        font-size: 10px;
    }
}
</style>

<template>
    <el-button-group class="table-columns-fixed-controller">
        <el-button
            v-for="option of options"
            :key="option.icon"
            :type="value === option.value ? 'primary' : 'default'"
            :icon="option.icon"
            @click="submit(option.value)"
        ></el-button>
    </el-button-group>
</template>

<script>
export default {
    name: 'table-columns-fixed-controller',
    props: {
        value: {
            type: [Boolean, String],
            default: false
        }
    },
    data() {
        return {
            options: [
                {
                    value: 'left',
                    icon: 'el-icon-arrow-left'
                },
                {
                    value: false,
                    icon: 'el-icon-close'
                },
                {
                    value: 'right',
                    icon: 'el-icon-arrow-right'
                }
            ]
        }
    },
    methods: {
        submit(value) {
            this.$emit('input', value)
            this.$emit('change', value)
        }
    }
}
</script>
